<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>dataStatistics</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/checkIn.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/selectInformation.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/dataStatistics.css">
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body class="bodyType">
        <div class="title">
            <samp>数据统计</samp>
        </div>
        <div style="width: 1000px;" id="dataStatistics" v-cloak>
            <div class="total">
                <div class="checkInTitel">
                    酒店订单
                </div>
                <hr style="color: #6d5a5a; width: 100%;">
                <div class="userCondition">
                    <label for="orderBeginTime">下单时间：</label>
                    <input type="date"  v-model="orderBeginTime" name="beginTime" id="orderBeginTime">
                    <span>至</span>
                    <input type="date" v-model="orderOverTime" name="overTime" >
                    <input type="button" @click="orderSelect" style="width: 50px; height: 26px;" value="查找">
<%--                    <input type="button" style="width: 50px; height: 26px; margin-left: 50px; border-radius: 0px; " value="今天">--%>
<%--                    <input type="button" style="width: 50px; height: 26px; border-radius: 0px; " value="昨天">--%>
<%--                    <input type="button" style="width: 75px; height: 26px; border-radius: 0px; " value="最近七天">--%>
<%--                    <input type="button" style="width: 50px; height: 26px; border-radius: 0px; " value="全部">--%>
                </div>
                <div class="userCondition">
                    <div style="border:  #f1f1f1 solid 1px;width: 65%;">
                        <table style="padding: 2px;" class="selectTable">
                            <tr>
                                <td>订单编号</td>
                                <td>客房门号</td>
                                <td>入住时间</td>
                                <td>租房时长</td>
                                <td>应收金额</td>
                                <td>实收金额</td>
                            </tr>
                            <tr v-for="item in orderList">
                                <td>{{item.id}}</td>
                                <td>{{item.roomNum}}</td>
                                <td>{{item.beginTime}}</td>
                                <td>{{item.stayTime}}</td>
                                <td>{{item.rantal}}</td>
                                <td>{{item.truePay}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="userCondition">
                    <label >总应收金额：</label>
                    <div id="perpay" class="perpay">{{totelneedCollect}}</div>
                    <label  style="padding-left: 36px;">总实收金额：</label>
                    <div id="sum" class="perpay">{{totelTrueCollect}}</div>
                </div>
            </div>
            <div class="total">
                <div class="checkInTitel">
                    顾客信息
                </div>
                <hr style="color: #6d5a5a; width: 100%;">
                <div class="userCondition">
                    <label for="beginTime">入住时间：</label>
                    <input type="date" v-model="guestBeginTime" name="beginTime" id="beginTime">
                    <span>至</span>
                    <input type="date" v-model="guestOverTime" name="overTime" id="overTime">
                    <input type="button" @click="guestSelect" style="width: 50px; height: 26px;" value="查找">
<%--                    <input type="button" style="width: 50px; height: 26px; margin-left: 50px; border-radius: 0px; " value="今天">--%>
<%--                    <input type="button" style="width: 50px; height: 26px; border-radius: 0px; " value="昨天">--%>
<%--                    <input type="button" style="width: 75px; height: 26px; border-radius: 0px; " value="最近七天">--%>
<%--                    <input type="button" style="width: 50px; height: 26px; border-radius: 0px; " value="全部">--%>
                </div>
                <div class="userCondition">
                    <div style="border:  #f1f1f1 solid 1px;width: 65%;">
                        <table style="padding: 2px;" class="selectTable">
                            <tr>
                                <td>姓名</td>
                                <td>身份证</td>
                                <td>电话号码</td>
                                <td>入住次数</td>
                                <td>消费金额</td>
                            </tr>
                            <tr v-for="item in guestList">
                                <td>{{item.name}}</td>
                                <td>{{item.identity}}</td>
                                <td>{{item.tel}}</td>
                                <td>{{item.times}}</td>
                                <td>{{item.truePay}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script src="${pageContext.request.contextPath}/res/js/jquery.js"></script>
        <script src="${pageContext.request.contextPath}/res/js/vue.js"></script>
        <script src="${pageContext.request.contextPath}/res/js/dataStatistics.js"></script>
    </body>
</html>